<template>
	<!-- 主体部分 -->
	<section class="main">
		<input id="toggle-all" class="toggle-all" type="checkbox" />
		<label for="toggle-all">Mark all as complete</label>
		<ul class="todo-list">
			<!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
			<li :class="{ completed: item.isDone }" v-for="item in showList" :key="item.id">
				<div class="view">
					<input
						class="toggle"
						type="checkbox"
						:checked="item.isDone"
						@change="changeIsDone(item)"
					/>
					<label>{{ item.name }}</label>
					<button class="destroy" @click="del(item.id)"></button>
				</div>
			</li>
		</ul>
	</section>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
export default {
	name: 'TodoMain',
	methods: {
		del(id) {
			this.$store.dispatch('DELTODOS', id)
		},
		changeIsDone(data) {
			data.isDone = !data.isDone
			this.$store.dispatch('CHANGEISDONE', data)
		},
	},
	computed: {
		...mapState(['todos', 'type']),
		...mapGetters(['showList']),
		// 全选不知道接口，没写
		// isCheckAll: {
		// get() {
		// 	return this.todos.every(item => item.isDone)
		// },
		// set(newValue) {
		// 	this.$emit('checkAll', newValue)
		// },
		// },
	},
}
</script>

<style></style>
